{"componentChunkName":"component---src-pages-categories-js","path":"/categories/","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"allMdx":{"edges":[{"node":{"excerpt":"想让你了解的是一个拖拽生成的低代码平台，虽然是低配的，但是实现起来还挺有意思。 一、背景和需求 H5 本来是 HTML5 的缩写，与 CSS3 和 ES5 代表着当时多年迟滞的高级浏览器特性更新，随着移动互联网的发展，逐渐的含义在运营层面变成了互动网页，更是基本上特指手机端的互动营销页面。H5 的形式在当时是一个非常热门的营销方式，毕竟快速接入，获客方便。 目前的 H…","id":"35a34818-564f-5a98-8f95-6581d65262c7","fields":{"title":"🪂 又一个 H5 拖放平台","slug":"/blog/h5kit","date":"2024-06-01","datetime":"2024-06-01 18:13:35","description":"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。","categories":["thinking"],"tags":["writing"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🪂 又一个 H5 拖放平台","date":"2024-06-01 18:13:35","description":"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。","banner":null,"tags":["writing"],"categories":["thinking"]}}},{"node":{"excerpt":"主要是想分享一个可用服务的简单实现，很多的大项目看起来很复杂，想要搭起来也非常不切实际，但是 80% 的稳定性实现 80% 的功能也并不是不能尝试。 个人的小项目中很多地方都会用到各种库，NPM 的库更是亲切，以前爪机时代有很多免费的 CDN 可以白嫖，大厂小厂都觉得公共 CDN…","id":"32a4be1f-afd7-5cf1-aaaf-ccb6e8b3e2aa","fields":{"title":"🪂 手动搭建一个 jsDeliver","slug":"/blog/setup-cdn-for-npm-and-gh","date":"2023-10-17","datetime":"2023-10-17 14:17:56","description":"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。","categories":["code"],"tags":["writing","CDN","npm"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🪂 手动搭建一个 jsDeliver","date":"2023-10-17 14:17:56","description":"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["writing","CDN","npm"],"categories":["code"]}}},{"node":{"excerpt":"⚡想分享的是 webpack 中使用依赖预编译的手段优化编译环节，优化开发环境下的体验。从用缓存降低二次编译时间，到第三方依赖的预编译方案的需求和实践讨论，到具体的实际落地。 ps: 无论是 webpack4 的内存缓存、  hard-source-webpack-plugin  还是 webpack5 内置完善的 cache…","id":"002e6cce-b11e-504d-9bcb-85a3af87ca5c","fields":{"title":"⚡ 优化 webpack 开发体验以及依赖预编译方案","slug":"/blog/prebundle","date":"2022-05-25","datetime":"2022-05-25 11:09:40","description":"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。","categories":["code"],"tags":["整理","功能","Webpack","prebundle"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⚡ 优化 webpack 开发体验以及依赖预编译方案","date":"2022-05-25 11:09:40","description":"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。","banner":null,"tags":["整理","功能","Webpack","prebundle"],"categories":["code"]}}},{"node":{"excerpt":"这篇文章分享的是更详细一步步的实现 VSCode 的 textmate，并且解释一些为什么，最后手动引入新的高亮逻辑。 PS: 上一篇相关文章： 🌋 WebIDE 的开发记录其五（monaco-editor + textmate） WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来询问 Textmate、LSP…","id":"8816fcee-6764-51e5-a1c0-40f9e0fd5a32","fields":{"title":"🌋 WebIDE 的开发记录其八（Textmate详解）","slug":"/blog/workpad-part-8","date":"2022-01-05","datetime":"2022-01-05 14:18:21","description":"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","Textmate"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其八（Textmate详解）","date":"2022-01-05 14:18:21","description":"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","Textmate"],"categories":["webide"]}}},{"node":{"excerpt":"想分享的是一个已经有初步思路的问题，怎么再进一步实现我们的目标形态。 先看结果：（DEMO 预览可以到  机器人眼睛动画的演示 ） 〇、上回书说到 上一篇文章写了实现静态的图像了，不过官方的开源中还包含了一个动画的资源，多达一千多个动画，这篇文章写写怎么实现这个动画。 一、动画文件的参数 先看一个动画的控制数据： 大概能分析有多种类型的控制，以 ms…","id":"e39d5e0b-deda-5587-933d-d45603d8ebfe","fields":{"title":"🤖 机器人眼睛动画的实现 2","slug":"/blog/k-vrc-vector-cozmo-2","date":"2021-09-04","datetime":"2021-09-04 16:34:10","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","categories":["code"],"tags":["整理","思考"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤖 机器人眼睛动画的实现 2","date":"2021-09-04 16:34:10","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABnUlEQVQoz4WOa0/TUBzGz7p23QwkjhBfrLt8Hwwi+gUAcY7wGv100OsE40uVi0CIyHo5Pe2mrO1AyePpERLAyV788vwvz/9CKOvD9UN4ARtDiK+HFIdHIU6+nWHv4OiW9+5MXqcsBtl4+w5T09NotVrQtPoYNGi1Guo8bjSa0Or/ehrNJqrVGSwtr4CsvFoFIeRhpCJHmuibm3sK0n7TEYmiKJD40G0KhQKkchnFmVnIHKmkQspr93yyLIsdC88XQVZft0WSG/93+fEUwZNqYeKH8/PPQDpr6yKpVB6JL8dRVhVU1DwuQSmVhMrXvfw7VVXFjsUXL0F2dz9jc1OHZerQTQumZcN2urBti6sD3XJgmDa2TAO6YWJLN2AYFhzbgcW93e0PeL/zEU53B5++7IMMkwRpNkKapki4JtkFsosrzm9BmjO6RJKT/SXlZKNfon7jG11eiR5htIez0wO4vRP0vh/Dc09BAw+UevB9H2EQIB4M0R+cc50MiWMG33MRRQwsisAYRcQCsDBASF2+mCtjiOIBBj8T9H8MH+QPBQTnUSpXYmUAAAAASUVORK5CYII=","aspectRatio":1.976627712854758,"src":"/static/c289618fe7e452b4133a03b30b5de03a/6fbf7/banner.png","srcSet":"/static/c289618fe7e452b4133a03b30b5de03a/a0798/banner.png 180w,\n/static/c289618fe7e452b4133a03b30b5de03a/83f67/banner.png 360w,\n/static/c289618fe7e452b4133a03b30b5de03a/6fbf7/banner.png 720w,\n/static/c289618fe7e452b4133a03b30b5de03a/728bb/banner.png 1080w,\n/static/c289618fe7e452b4133a03b30b5de03a/2513a/banner.png 1440w,\n/static/c289618fe7e452b4133a03b30b5de03a/72e9c/banner.png 2368w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是从脑袋里有一个想法，到调研、遇到瓶颈、找到突破、走弯路、实现还算可以的效果，最后完善到完美。就像大部分的工作一样，每一步都好像都不太顺利，但是最后还是能够把问题解决。 先看结果：（DEMO…","id":"b7cc2c7b-b49d-5445-9986-bd800c4695c1","fields":{"title":"🤖 机器人眼睛动画的实现","slug":"/blog/k-vrc-vector-cozmo","date":"2021-09-03","datetime":"2021-09-03 16:34:10","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","categories":["code"],"tags":["整理","思考"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤖 机器人眼睛动画的实现","date":"2021-09-03 16:34:10","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABnUlEQVQoz4WOa0/TUBzGz7p23QwkjhBfrLt8Hwwi+gUAcY7wGv100OsE40uVi0CIyHo5Pe2mrO1AyePpERLAyV788vwvz/9CKOvD9UN4ARtDiK+HFIdHIU6+nWHv4OiW9+5MXqcsBtl4+w5T09NotVrQtPoYNGi1Guo8bjSa0Or/ehrNJqrVGSwtr4CsvFoFIeRhpCJHmuibm3sK0n7TEYmiKJD40G0KhQKkchnFmVnIHKmkQspr93yyLIsdC88XQVZft0WSG/93+fEUwZNqYeKH8/PPQDpr6yKpVB6JL8dRVhVU1DwuQSmVhMrXvfw7VVXFjsUXL0F2dz9jc1OHZerQTQumZcN2urBti6sD3XJgmDa2TAO6YWJLN2AYFhzbgcW93e0PeL/zEU53B5++7IMMkwRpNkKapki4JtkFsosrzm9BmjO6RJKT/SXlZKNfon7jG11eiR5htIez0wO4vRP0vh/Dc09BAw+UevB9H2EQIB4M0R+cc50MiWMG33MRRQwsisAYRcQCsDBASF2+mCtjiOIBBj8T9H8MH+QPBQTnUSpXYmUAAAAASUVORK5CYII=","aspectRatio":1.976627712854758,"src":"/static/c289618fe7e452b4133a03b30b5de03a/6fbf7/banner.png","srcSet":"/static/c289618fe7e452b4133a03b30b5de03a/a0798/banner.png 180w,\n/static/c289618fe7e452b4133a03b30b5de03a/83f67/banner.png 360w,\n/static/c289618fe7e452b4133a03b30b5de03a/6fbf7/banner.png 720w,\n/static/c289618fe7e452b4133a03b30b5de03a/728bb/banner.png 1080w,\n/static/c289618fe7e452b4133a03b30b5de03a/2513a/banner.png 1440w,\n/static/c289618fe7e452b4133a03b30b5de03a/72e9c/banner.png 2368w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是对于网络层可用性的一些常见端侧优化案~~ 明天和意外哪个先来临？ 没有人能说自己手中的项目能够万无一失，没人能保证千万分之一的错误率，不能被你遇到，程序崩溃，服务瘫痪的例子已经不算是新闻了，一个大型项目的上线，怎么才能保证健壮和稳定呢？ 从源头考虑，比较基础的有代码规范、强类型限制、MergeRequest…","id":"e7faa624-9431-587e-b5b2-ada6090e59f2","fields":{"title":"🪂 兜底和容灾","slug":"/blog/fallback","date":"2021-06-18","datetime":"2021-06-18 18:13:35","description":"周末你和爱人吃着饭，突然一个电话过来，平台突然无法访问，数万活跃用户受到影响，你匆忙赶到公司，发现除了发版无法解决，最后紧急提交但是还是等到下周一才彻底解决，复盘发现大量用户流失。最后结论是：意外总是突如其来，你准备的越充分越能抗住","categories":["code"],"tags":["兜底和容灾"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🪂 兜底和容灾","date":"2021-06-18 18:13:35","description":"周末你和爱人吃着饭，突然一个电话过来，平台突然无法访问，数万活跃用户受到影响，你匆忙赶到公司，发现除了发版无法解决，最后紧急提交但是还是等到下周一才彻底解决，复盘发现大量用户流失。最后结论是：意外总是突如其来，你准备的越充分越能抗住","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAaoAWcGP/8QAGRABAAIDAAAAAAAAAAAAAAAAAgEREhMi/9oACAEBAAEFAjQGvlHGf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAIDAAAAAAAAAAAAAAAAAAAiEUFh/9oACAEBAAY/AlvRiD//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMVFhgf/aAAgBAQABPyElKWRe0otyHUyLx5n/2gAMAwEAAgADAAAAEIP/AP/EABYRAAMAAAAAAAAAAAAAAAAAAAABMf/aAAgBAwEBPxBQdP/EABYRAAMAAAAAAAAAAAAAAAAAAAABMf/aAAgBAgEBPxB0UP/EABoQAQEAAwEBAAAAAAAAAAAAAAERACExQZH/2gAIAQEAAT8QmoeNojm/TuX5oWkj7J9xGShsODxM/9k=","aspectRatio":2.5,"src":"/static/05e4752797239ca0e0416a47b0311c22/746ab/banner.jpg","srcSet":"/static/05e4752797239ca0e0416a47b0311c22/29fd0/banner.jpg 180w,\n/static/05e4752797239ca0e0416a47b0311c22/8841e/banner.jpg 360w,\n/static/05e4752797239ca0e0416a47b0311c22/746ab/banner.jpg 720w,\n/static/05e4752797239ca0e0416a47b0311c22/90537/banner.jpg 1080w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["兜底和容灾"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"db2ff414-2b81-5500-9dd8-fe0b104507e7","fields":{"title":"🏡 因为租房子我一口气写了两个项目","slug":"/blog/range","date":"2021-06-08","datetime":"2021-06-08 18:13:35","description":"房租还有半个月到期，想着去找找房子吧，但是去哪找？搬去哪的问题是个大问题，北京城很大，房子很多，只要妥协总能找到，可惜我不想妥协。","categories":["code"],"tags":["生活"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🏡 因为租房子我一口气写了两个项目","date":"2021-06-08 18:13:35","description":"房租还有半个月到期，想着去找找房子吧，但是去哪找？搬去哪的问题是个大问题，北京城很大，房子很多，只要妥协总能找到，可惜我不想妥协。","banner":null,"tags":["生活"],"categories":["code"]}}},{"node":{"excerpt":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。 上篇（ 🌏 把 MIUI 12 的超级壁纸搬到 Web 上 ）说了很多的东西，这里不再赘述，只是一些不一样的地方。 一、结果放到前面 预览可戳(17MB…","id":"1c4a32ef-78bc-5082-a9cc-82fcc87ecac6","fields":{"title":"🗻 把 MIUI 12 的超级雪山搬到 Web 上（二）","slug":"/blog/move-miui-12-super-wallpaper-to-web-2","date":"2021-01-13","datetime":"2021-01-13 15:55:36","description":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。","categories":["code"],"tags":["Three.js","3D","Mars"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🗻 把 MIUI 12 的超级雪山搬到 Web 上（二）","date":"2021-01-13 15:55:36","description":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHEkLQr/8QAFxABAQEBAAAAAAAAAAAAAAAAAQIRAP/aAAgBAQABBQKUl3hM/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bp//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAAAAxEf/aAAgBAQAGPwKaiP/EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyG++CQA2Qg4zk//2gAMAwEAAgADAAAAEAQP/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Qo//EABYRAAMAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxCBf//EABoQAQEAAwEBAAAAAAAAAAAAAAERADFhIUH/2gAIAQEAAT8QEOEiJMeBdyr915zLKaIwt7n/2Q==","aspectRatio":3.1218905472636815,"src":"/static/5ced1533e64532fcef1ef1fb54dbf043/746ab/banner.jpg","srcSet":"/static/5ced1533e64532fcef1ef1fb54dbf043/29fd0/banner.jpg 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/8841e/banner.jpg 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/746ab/banner.jpg 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/90537/banner.jpg 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/c87a3/banner.jpg 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/e87e4/banner.jpg 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["Three.js","3D","Mars"],"categories":["code"]}}},{"node":{"excerpt":"之前说过数据层相关的内容： 📦 实现一个简单朴素的 react 数据管理层 NOVUS 📊 React 实践技巧和性能优化 ⚓ React Hooks…","id":"024f3d04-8fe3-5f84-9d1c-7bcc6d66120f","fields":{"title":"🔂 数据驱动模式下状态和视图层逻辑","slug":"/blog/model-and-view-logic-under-state-driven-mode","date":"2020-12-18","datetime":"2020-12-18 01:17:36","description":"“你需要精心设计好数据模型和组件状态才能得到一个运转良好的视图表现。” 无论是什么框架或者语言，这种架构优秀的应用都是减少状态变更牵扯的计算和渲染。","categories":["code"],"tags":["前端","整理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔂 数据驱动模式下状态和视图层逻辑","date":"2020-12-18 01:17:36","description":"“你需要精心设计好数据模型和组件状态才能得到一个运转良好的视图表现。” 无论是什么框架或者语言，这种架构优秀的应用都是减少状态变更牵扯的计算和渲染。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["前端","整理"],"categories":["code"]}}},{"node":{"excerpt":"PS: 跨域警告是浏览器安全的很重要机制，代理和转发服务对于服务提供者是异常访问行为，如果对目的服务器故意隐藏来源也是一种非法行为。所以虽然没有法律明确，但是需要遵循不能大规模流量劫持，不能从事非法活动，必须添加  Origin  或者  X-Requested-With…","id":"fa524fed-fde8-51f6-85ee-2afb7fcab057","fields":{"title":"🌈 跨域任意门","slug":"/blog/cors-anywhere","date":"2020-12-17","datetime":"2020-12-17 00:17:36","description":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。","categories":["code"],"tags":["前端","整理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌈 跨域任意门","date":"2020-12-17 00:17:36","description":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["前端","整理"],"categories":["code"]}}},{"node":{"excerpt":"想让读者了解的事情 在阅读这篇关于 Chrome 技术实现的文章前，希望你能理解： 标准化的力量  - 原生 Web 标准往往是最优的解决方案 组件化的本质  - Web Components…","id":"80f622c2-3eb0-505b-9993-46d05150698a","fields":{"title":"🍻 跟着 Chrome 学技术","slug":"/blog/learn-from-chrome","date":"2020-11-17","datetime":"2020-11-17 22:50:20","description":"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！","categories":["code"],"tags":["整理","思考","功能"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🍻 跟着 Chrome 学技术","date":"2020-11-17 22:50:20","description":"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB+ElEQVQoz11SS08TURSe31Dn0XbmzsydV1taTB0LVsgQoDMt2oY2FKowrUR8RyIRNXFrQowr48oVhmg0JiYmLFz5F1y68Le4+rz3lhJhcXJOzuM7j+9INvVAiIXq7CLKF0OYFgX3cbFsF5Rp03JRKAT4edTD39+3cfi6JWL/501syfEKMAwTUdLFfBTBNG04rg/q+EwHJ4kuDNMRwNOVIrO5b5wzAZtoSdPyMIgNYhBYbLqcTiFrBKqWQ+aCCpsVeUEJQbHMGhQgqzoUNSviuTw5A2YSCunh7lMsLMYCNGdQtJsR7ox6SEc7eLK3j9VeH9c7XTRX2lhqJFjtruHx7h5ube8gaV4TdXxSDlaZDSF9/naMTrfPuhnQ2SrL89NIe3WsD4a4e++BKIqT1qmOkxVsDbcxuLGFaGFJADpegLxKkL55BKk2c3XchY3sOJ5YWcnakGUFul3E6OUXbO5/wObzI6QvPsKbqiGTkdnKOvK6yU4yXtkvlvDs+ACSblgCLGtSaEw4KBXiw/VLqC/3MZfcxFw8QL2xznxT4/gJYZQRmFV0VBtX8OrXe8YyK+RgnWoVG5dDqOwW9PQdHPYBRLwVIaYQy3LOEEEYkZXyJRwcvsPbP58g8WI+WT8MMZypQWGAzrnfOi+TGN+C3z5utfH1+w+s3U/xD8i5HqdyQD4mAAAAAElFTkSuQmCC","aspectRatio":2.2248628884826327,"src":"/static/9d6ab02ba3cd6914d7fd6eac628d0697/6fbf7/banner.png","srcSet":"/static/9d6ab02ba3cd6914d7fd6eac628d0697/a0798/banner.png 180w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/83f67/banner.png 360w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/6fbf7/banner.png 720w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/728bb/banner.png 1080w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/4b110/banner.png 1217w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考","功能"],"categories":["code"]}}},{"node":{"excerpt":"PS: 建议配合上篇文章食用  📦 实现一个简单朴素的 react 数据管理层 NOVUS PS 2 : 有意思的点： Novus 版本的 Fiber，喘息机制 ， 自动收集订阅依赖问题 ， 完善的测试 PS…","id":"4b47ec34-72a4-53b3-bcc7-635b1d884359","fields":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","slug":"/blog/novus-2","date":"2020-10-17","datetime":"2020-10-17 22:50:20","description":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。","categories":["code"],"tags":["整理","思考","功能","NOVUS","状态管理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","date":"2020-10-17 22:50:20","description":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAAA90lEQVQY021R204FIQzkP3SXa2kL7ALu5mjigw/+/z85Z4+JmjiQ0rR0pgUTQvTO5UycLxDlDJedc+uFZVkik9RCRN7j7jesc8YN9S2nTdPR0kuNs5ZDmfy6WhTCLE/PoZfz4/08Ti0lxpgAIhzGdQ1ve1LUS5o1zRIrOQte5y84LOvatrFICOHR0XLB2CG+C+rjJmADMdLoUESYWRU2Q6e0qgrhIgipQttaa/Q25XXS5422Ao1wFT96gw8pEMHRVoHyswtS5hxH76P1TZlXa9e/sFcEdGPOfe/McicNAeMgbvLAOzVLQjoo37u1/1FkZnzD74HhfAHm5jyES2JEdAAAAABJRU5ErkJggg==","aspectRatio":2.811088295687885,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/6fbf7/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/a0798/banner.png 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/83f67/banner.png 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/6fbf7/banner.png 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/728bb/banner.png 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/fc672/banner.png 1369w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考","功能","NOVUS","状态管理"],"categories":["code"]}}},{"node":{"excerpt":"ubug.io 这个域名是在几年前申请的，一直续费用着，主要的一个原因是很简洁，所以有时候会想用这个域名做一个短链接服务。 今天终于把这个想法从 TODO List 拿出来思考并实现出来了。 这是地址： 短链服务 开发的过程太顺利，挺有意思，所以在此记录下整个实现，流水账很罗嗦，技术也不复杂，推荐扫一眼即可。 一、目标和需求 正常的短链服务一般用来做网址缩短，比长段的 URL…","id":"ebe45031-3d41-5792-b4d9-5529e4c4a168","fields":{"title":"🔗 30 分钟创建一个短链服务 ","slug":"/blog/short-url-service-in-30-minutes","date":"2020-09-18","datetime":"2020-09-18 12:23:35","description":"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。","categories":["code"],"tags":["短链","Baas"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔗 30 分钟创建一个短链服务 ","date":"2020-09-18 12:23:35","description":"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAjElEQVQY052QSw6DMAxEuf8N2bClqC0t4DhfMo2NgtoNUmNplLElP03c4atyzudrnVc5H0DGYllJvczYOqSUfnZqdVdAw1Zhj/mN6T4ffVEbsCxtxHi+FpUkJMMK8yVp/Ae47xkhRO3F16pe0sWWLx83dLhNhGFYS2/PGzYBZTFEj3Fk9P2mXmZXN/wA3xrYup9WGI0AAAAASUVORK5CYII=","aspectRatio":3.3645083932853717,"src":"/static/abac10aa1271ddc100a766e57da44f0c/6fbf7/banner.png","srcSet":"/static/abac10aa1271ddc100a766e57da44f0c/a0798/banner.png 180w,\n/static/abac10aa1271ddc100a766e57da44f0c/83f67/banner.png 360w,\n/static/abac10aa1271ddc100a766e57da44f0c/6fbf7/banner.png 720w,\n/static/abac10aa1271ddc100a766e57da44f0c/728bb/banner.png 1080w,\n/static/abac10aa1271ddc100a766e57da44f0c/a0c4b/banner.png 1403w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["短链","Baas"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"7ca52204-5de7-5721-82df-a39c38ac429b","fields":{"title":"⛓ 未来协议","slug":"/blog/future-protocol","date":"2020-09-10","datetime":"2020-09-10 17:26:31","description":"对未来互联网和生活的畅想，发挥点想象力的天马行空。","categories":["code"],"tags":["思考"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⛓ 未来协议","date":"2020-09-10 17:26:31","description":"对未来互联网和生活的畅想，发挥点想象力的天马行空。","banner":null,"tags":["思考"],"categories":["code"]}}},{"node":{"excerpt":"IOS 上的背景模糊效果真的非常的惊艳，从 CSS backdrop-filter 这个属性可用以来就实验性的玩过，除了兼容性问题上硬伤(目前 86% 左右，尤其是国内 X5 内核等魔改内核（微信和很多 APP 内置的浏览器）)，效果还是很不错的。 一、什么是亚克力 前两天又看到了微软的 Fluent Design，Fluent Design System…","id":"6505615e-7a9b-518c-b5c4-380c5d6add61","fields":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","slug":"/blog/fluent-acrylic","date":"2020-08-05","datetime":"2020-08-05 19:18:10","description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","categories":["code"],"tags":["css","acrylic","UI-Library"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","date":"2020-08-05 19:18:10","description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","banner":null,"tags":["css","acrylic","UI-Library"],"categories":["code"]}}},{"node":{"excerpt":"〇、背景 Node.js 是一个了不起的应用，将 JavaScript 这个偏居一隅的脚本，变成了领域边界非常广阔的应用语言，就这一点来说怎么夸赞都不为过。 前些年 Node.js 在仅有的 ES 标准下发展壮大，不过近些年随着 ES 标准的演进，TypeScript 的广泛应用，Node.js…","id":"8f37d124-ec81-52a3-85ef-12560d306667","fields":{"title":"🐍 新技术尝个鲜 - deno","slug":"/blog/deno-introduce","date":"2020-07-20","datetime":"2020-07-20 20:28:12","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","categories":["code"],"tags":["deno"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐍 新技术尝个鲜 - deno","date":"2020-07-20 20:28:12","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAyElEQVQoz52RTQqDMBBGPVH3gkfQkwgew2t4BKE712aTnSu7UHuCJMV/Y9T2a6AtWKHaB4EM5DGZb4zxxaAZj2DgSCmnabprlFIo98p4Os9zWZZnTVVVy7Ioza7OaOu67knjeV7XdXVdt237W8ZXKaWO4xBCfN+HT+I4TS9FcZXfjHItZ1lmWRbMJElM0yzyvGkaLrgQ4iYEYwwXzjljfJXoc2b4QRDYth1FURiGKPu+l1tszAwgICp0QFrHVvXeFmLfv6eP/B8Pmf8qtWa+2kYAAAAASUVORK5CYII=","aspectRatio":2.051851851851852,"src":"/static/6ecc1d3a3f78edafaddd14a519392e6f/6fbf7/banner.png","srcSet":"/static/6ecc1d3a3f78edafaddd14a519392e6f/a0798/banner.png 180w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/83f67/banner.png 360w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/6fbf7/banner.png 720w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/728bb/banner.png 1080w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/a3576/banner.png 1108w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["deno"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"efef442d-0f5c-556e-a942-17e00d70eb08","fields":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","slug":"/blog/marry","date":"2020-07-10","datetime":"2020-07-10 20:08:10","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","categories":["think"],"tags":["美好"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","date":"2020-07-10 20:08:10","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAHIsBAVP//EABkQAAEFAAAAAAAAAAAAAAAAAAIAARITMv/aAAgBAQABBQIMDGp1/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxABAAAHAAAAAAAAAAAAAAAAAQACEBEhQXH/2gAIAQEABj8CSxmJTfKf/8QAGxAAAQQDAAAAAAAAAAAAAAAAAQARIUExUXH/2gAIAQEAAT8hLNNjSI2F3ghEcX//2gAMAwEAAgADAAAAEAA//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/EBV//8QAFhEBAQEAAAAAAAAAAAAAAAAAABFB/9oACAECAQE/EMV//8QAGxAAAwEAAwEAAAAAAAAAAAAAAREhAEFRYcH/2gAIAQEAAT8QV4hqnWasAvDlFtnByBRJQX3f/9k=","aspectRatio":3.1218905472636815,"src":"/static/6701d75556a4650d2381158d8d4b0b71/746ab/banner.jpg","srcSet":"/static/6701d75556a4650d2381158d8d4b0b71/29fd0/banner.jpg 180w,\n/static/6701d75556a4650d2381158d8d4b0b71/8841e/banner.jpg 360w,\n/static/6701d75556a4650d2381158d8d4b0b71/746ab/banner.jpg 720w,\n/static/6701d75556a4650d2381158d8d4b0b71/90537/banner.jpg 1080w,\n/static/6701d75556a4650d2381158d8d4b0b71/c87a3/banner.jpg 1440w,\n/static/6701d75556a4650d2381158d8d4b0b71/e87e4/banner.jpg 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["美好"],"categories":["think"]}}},{"node":{"excerpt":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。 这几天瞥到宣传图突发奇想，不就是个3D球吗？WEB 上好像也能实现，要不试试？ 预览可戳(16MB…","id":"7a4db9ef-9f76-5854-b2fa-b70aa7635e36","fields":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","slug":"/blog/move-miui-12-super-wallpaper-to-web","date":"2020-07-02","datetime":"2020-07-02 15:55:36","description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","categories":["code"],"tags":["Three.js","3D","Mars"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","date":"2020-07-02 15:55:36","description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHEkLQr/8QAFxABAQEBAAAAAAAAAAAAAAAAAQIRAP/aAAgBAQABBQKUl3hM/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bp//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAAAAxEf/aAAgBAQAGPwKaiP/EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyG++CQA2Qg4zk//2gAMAwEAAgADAAAAEAQP/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Qo//EABYRAAMAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxCBf//EABoQAQEAAwEBAAAAAAAAAAAAAAERADFhIUH/2gAIAQEAAT8QEOEiJMeBdyr915zLKaIwt7n/2Q==","aspectRatio":3.1218905472636815,"src":"/static/5ced1533e64532fcef1ef1fb54dbf043/746ab/banner.jpg","srcSet":"/static/5ced1533e64532fcef1ef1fb54dbf043/29fd0/banner.jpg 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/8841e/banner.jpg 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/746ab/banner.jpg 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/90537/banner.jpg 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/c87a3/banner.jpg 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/e87e4/banner.jpg 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["Three.js","3D","Mars"],"categories":["code"]}}},{"node":{"excerpt":"当你想要排序的时候，肯定会需要用到 sort 方案，但是请切忌排序结果没问题，但是过程是一个黑盒。 问题 需求是随机获得 0-16 的数字组合，用处是来打乱一副牌，但是需要保证两人相同的随机过程。所以做了一个种子随机数，两个人实现同样的打乱过程，初步想法。 于是： 上面的程序在浏览器里面运行没问题，重复 n…","id":"90a5685e-ac35-574c-b3f0-e2405184100e","fields":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","slug":"/blog/random-and-sort","date":"2020-06-15","datetime":"2020-06-15 20:08:10","description":"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~","categories":["code"],"tags":["sort","random"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","date":"2020-06-15 20:08:10","description":"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~","banner":null,"tags":["sort","random"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"e2a8341f-425c-576f-bb41-0e8383ee1cc9","fields":{"title":"🙅‍ 持续集成和部署(CI 和 CD)","slug":"/blog/ci-cd","date":"2020-05-18","datetime":"2020-05-18 13:54:13","description":"持续集成是现代团队协作的基础建设了，一个成熟的团队肯定会搭建自己的整个持续集成和持续部署流程。","categories":["code"],"tags":["持续集成","持续部署","前端"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🙅‍ 持续集成和部署(CI 和 CD)","date":"2020-05-18 13:54:13","description":"持续集成是现代团队协作的基础建设了，一个成熟的团队肯定会搭建自己的整个持续集成和持续部署流程。","banner":null,"tags":["持续集成","持续部署","前端"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是 serverless 的理解，保持眼界开阔，思考能力的价值，拥抱变化~~~ 一、什么是 serverless 无服务架构 听起来很高大上，火的不要不要的词，看了 n 篇文章也不知道是什么，都在说思想多好多好，什么 Faas、Baas、无服务化、云原生之类的词，看的更迷糊了。 其实： serverless…","id":"5145372e-fd2a-5b70-aa1a-fa32efbc2637","fields":{"title":"🌀 serverless 时代和云计算时代","slug":"/blog/serverless-and-cloud-compute","date":"2020-04-20","datetime":"2020-04-20 21:22:43","description":"serverless 就是不需要买/租服务器就能把程序运行起来。那程序放到哪？怎么触发？调用数据库怎么办？怎么写代码？怎么部署和运行？","categories":["code"],"tags":["serverless"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌀 serverless 时代和云计算时代","date":"2020-04-20 21:22:43","description":"serverless 就是不需要买/租服务器就能把程序运行起来。那程序放到哪？怎么触发？调用数据库怎么办？怎么写代码？怎么部署和运行？","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAACVklEQVQozz3RyU9TURjG4f5HBhkqFFrae+mFImAZC7SWlMmqLZNtQQEjUYyEhcbohrULF0ZEZiHYMvXeW7SARHBITFy7caELY35+WOPi5DvJyXnyvudYbH6TsuAejlAWZ9c+zt4DnOEDysL7eGLvCU1/wR7NYu81qL5icqFvD23IRBkyUBMm6nWZ4zJvZVAnTCzFbQalgYygbygX1NUjWFeW9rHPPE3+Yi79m8ez3/DF9zh/yaApfoAWy6D066gxA2VYsBvmf9RyzpfmFLX5c6iz+4Dy7n0q/TvE737i+dYPkkc/id47lrM0nkGTyn4TV1TAQeMfKnNUwJuSsKhpl+JWHXswIwnfUi71tfYMNm0Rq/qSh0++8iz5Hf/IIe4eXSpnqImYaBFB+gU7ReOCjeRQi7V5h1K/1G7TcTRu4apNUu5ZRalZRK1bIHbnkM7EPookruhIo4Z28Yb3aBjIokaNXPWhHKrIe1oK6rcoqt6gRi4EIlkq65MUq3O03jjBH3+H1pTC3ZpGC+hoHTruUJqKLtmHBQjrKJFTVNa13CdZzpYtUliyQKm6ilafoqohheZNUdG4SZVPpy5gMPXoIxP3j5l4cMzUzAfi00dMzpxQHRX86i7uAUk+qP9FLXmFL8gvnqfAtoDVvoRDW6PSm0SV6o5qwZtTBAbW6Bhe4mJiFX9ineDYKp23l/GNrtAyvoJ/cgHv6AauAUl4pmCWPOsc+SXzFEpaq2OZEuUVNvc6ds9rnLWbKN5N1KZt1JZtlNYd1ICsoLxppyTsSeO+LFPSKn0GfwB+88AjU9DHMQAAAABJRU5ErkJggg==","aspectRatio":2.2222222222222223,"src":"/static/63915122abea25dcad04ca23d30ff2a8/6fbf7/banner.png","srcSet":"/static/63915122abea25dcad04ca23d30ff2a8/a0798/banner.png 180w,\n/static/63915122abea25dcad04ca23d30ff2a8/83f67/banner.png 360w,\n/static/63915122abea25dcad04ca23d30ff2a8/6fbf7/banner.png 720w,\n/static/63915122abea25dcad04ca23d30ff2a8/728bb/banner.png 1080w,\n/static/63915122abea25dcad04ca23d30ff2a8/ba299/banner.png 1200w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["serverless"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是数据库相关的基本知识和 SQL 的相关概念，完备的回顾下相关能力，温故知新~~~ 刚开始写代码自学的时候，目的就是做网站，所以接触了很多的后台 PHP 和数据库相关的能力，工作中很长一段也承担了中间层和后台管理系统的搭建，所以可以说挺熟悉的。但是没有完备系统的整理过数据库的相关能力，平时 SQL…","id":"ab0ef5c6-d8c2-5d3a-b4d2-9a7ad1aaf49e","fields":{"title":"📃 数据库和 SQL","slug":"/blog/database-and-sql","date":"2020-04-10","datetime":"2020-04-10 20:49:53","description":"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。","categories":["code"],"tags":["SQL","整理","数据库"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📃 数据库和 SQL","date":"2020-04-10 20:49:53","description":"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAoUlEQVQY032RjQqFIAxGe/8nDVKzTNN+2OUMdol7K+HDObfjN+yO4xC077vknGVZFlnX9VW1VhVxa02MgbrrwXsvfd8rFKWUVBbzIKBpmiTGqDvQWyAO53mWYRi0Gfg4jtpEDielFIVSR96meQQCooAma7bRtm373lHP4hFy53neA3HknFN3phCC7oxoY+OOmBxngPT/Ad8+AsfoGqPfT/kAkcrSQp+LnvEAAAAASUVORK5CYII=","aspectRatio":3.4297297297297296,"src":"/static/b692ff0ef0c34954d59b28d424c27f5f/6fbf7/banner.png","srcSet":"/static/b692ff0ef0c34954d59b28d424c27f5f/a0798/banner.png 180w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/83f67/banner.png 360w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/6fbf7/banner.png 720w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/728bb/banner.png 1080w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/514b5/banner.png 1269w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["SQL","整理","数据库"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是让你知道一个项目的初始化并不是必须要各种脚手架，只要你知道要什么和其中的配合，就很容易初始化需要的项目。…","id":"24c013f9-6ca3-5c34-86f6-7c15b7f321b5","fields":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","slug":"/blog/start-from-empty-to-ts-react","date":"2020-03-25","datetime":"2020-03-25 13:50:19","description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","categories":["code"],"tags":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","date":"2020-03-25 13:50:19","description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","banner":null,"tags":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是只需要一点点的数学计算就能实现 Flutter 中不同 fitMode 的图片的 Hero 转换动画。 我们经常在很多 app 都见到过在列表页的小图，点击后小图连续的动画，变成大图展示在顶部，特别的流畅。这就是 flutter 里的 hero…","id":"6df12020-1eb1-5808-9368-b9e4f65d85d3","fields":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","slug":"/blog/flutter-hero-with-image-fit","date":"2020-03-19","datetime":"2020-03-19 17:38:57","description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","categories":["code"],"tags":["功能","技巧","flutter"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","date":"2020-03-19 17:38:57","description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVQY0zWPy0oCUQCGz5TQC+QTtGzTqh6gRRBtoo20jlxGm1p1hQqMaMTAQAoKUgxdREEULSK7ESpKgZKLbKaamryMHmfm3E9G9O0//u8HVcwKDrchdBFyXZcQwjkjBAnOGBdSyip0VpI3Y5F7EHhTgjWwBTtC9U71S1FNkLfw7rNlmZ+arpdKJcMwOKOQSBMJp15pWI3tR9R7AH2xYs/anTeQHZjd8a7mQAgq6jegmNg2opRijAnGiDCGbVa/in+0Eu88W65OJnUwU+zbM84L5onW9O2fDU0v9s/FujY00O6klPyBf5sJFzyRTsUvw9daJvgq/dHM0ulL08HtC1KIlpSb2fKwf6p7IQXIP+1hwciTiUaOaooKlXV9IhofDN+OH1+Q2qGUjPJfPZd+GJ2PeJbznlDlBzoL6nJadrmkAAAAAElFTkSuQmCC","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/6fbf7/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/a0798/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/83f67/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/6fbf7/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/728bb/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/2513a/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/9ecf6/banner.png 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["功能","技巧","flutter"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是让你知道  flutter  开发中遇到的性能问题，和一些很容易的优化方法。 无论用什么语言开发应用的时候，性能和稳定性都是一个更高要求的方面，用 80% 的时间来拔高 20% 的效果。 这里因为业务的 APP…","id":"0841789b-4d4a-56c2-bf8e-7778bd9770dc","fields":{"title":"💊 flutter 性能优化","slug":"/blog/flutter-performance","date":"2020-03-10","datetime":"2020-03-10 19:32:51","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","categories":["code"],"tags":["整理","性能优化","flutter","调试"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💊 flutter 性能优化","date":"2020-03-10 19:32:51","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVQY0zWPy0oCUQCGz5TQC+QTtGzTqh6gRRBtoo20jlxGm1p1hQqMaMTAQAoKUgxdREEULSK7ESpKgZKLbKaamryMHmfm3E9G9O0//u8HVcwKDrchdBFyXZcQwjkjBAnOGBdSyip0VpI3Y5F7EHhTgjWwBTtC9U71S1FNkLfw7rNlmZ+arpdKJcMwOKOQSBMJp15pWI3tR9R7AH2xYs/anTeQHZjd8a7mQAgq6jegmNg2opRijAnGiDCGbVa/in+0Eu88W65OJnUwU+zbM84L5onW9O2fDU0v9s/FujY00O6klPyBf5sJFzyRTsUvw9daJvgq/dHM0ulL08HtC1KIlpSb2fKwf6p7IQXIP+1hwciTiUaOaooKlXV9IhofDN+OH1+Q2qGUjPJfPZd+GJ2PeJbznlDlBzoL6nJadrmkAAAAAElFTkSuQmCC","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/6fbf7/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/a0798/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/83f67/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/6fbf7/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/728bb/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/2513a/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/9ecf6/banner.png 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","性能优化","flutter","调试"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"b21210c2-f124-5473-9732-6336302a2ae0","fields":{"title":"🚴‍♀️ 小公司的技术架构演进","slug":"/blog/technical-architecture-evolution-in-small-company","date":"2020-03-02","datetime":"2020-03-02 20:12:18","description":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进","categories":["think"],"tags":["整理","思考","技术演进","flutter"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚴‍♀️ 小公司的技术架构演进","date":"2020-03-02 20:12:18","description":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进","banner":null,"tags":["整理","思考","技术演进","flutter"],"categories":["think"]}}},{"node":{"excerpt":"大部分的 React 开发是不需要考虑性能优化的，因为很多业务复杂度不需要这么苛刻的需求，常见的页面和交互都比较简单，展示型的组件除了长列表并没有太多性能问题。不过 React 这类框架生来就是能够搭建大型单页应用的，所以性能问题在这些应用级别的页面中还是很值得说道的。 好巧不巧，我在项目中就遇到了很多的性能问题， 🌋 WebIDE…","id":"beeddcae-7d80-5cbf-9952-0567f3ee19be","fields":{"title":"📊 React 实践技巧和性能优化","slug":"/blog/react-pratice-and-performance","date":"2020-02-24","datetime":"2020-02-24 20:24:36","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","categories":["code"],"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📊 React 实践技巧和性能优化","date":"2020-02-24 20:24:36","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","banner":null,"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"],"categories":["code"]}}},{"node":{"excerpt":"1. Typescript…","id":"e64b5c46-84ab-5699-bc5b-d5460491e764","fields":{"title":"🤔 技术背后隐含的思维方式","slug":"/blog/thinking-behind-tech","date":"2020-02-16","datetime":"2020-02-16 10:17:10","description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","categories":["think"],"tags":["整理","思考","Typescript","ReactHooks","Fiber","Flux"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤔 技术背后隐含的思维方式","date":"2020-02-16 10:17:10","description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","banner":null,"tags":["整理","思考","Typescript","ReactHooks","Fiber","Flux"],"categories":["think"]}}},{"node":{"excerpt":"PS: 仓库和代码在最下面； PS 2 : 后续出现了一些问题和痛点，做了很多的改进：  📦 改进一个简单朴素的 react 数据管理层 NOVUS ，包括同步触发、初始化、自动依赖收集、“喘息机制”、Novus 版 Fiber 和测试，本篇重点说需求、基础功能和初步实现。 PS…","id":"0d56e544-58e4-592d-9f5f-8518cdeb0cfc","fields":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","slug":"/blog/novus","date":"2020-02-07","datetime":"2020-02-07 22:50:20","description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","categories":["code"],"tags":["整理","思考","功能","NOVUS","状态管理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","date":"2020-02-07 22:50:20","description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAAA90lEQVQY021R204FIQzkP3SXa2kL7ALu5mjigw/+/z85Z4+JmjiQ0rR0pgUTQvTO5UycLxDlDJedc+uFZVkik9RCRN7j7jesc8YN9S2nTdPR0kuNs5ZDmfy6WhTCLE/PoZfz4/08Ti0lxpgAIhzGdQ1ve1LUS5o1zRIrOQte5y84LOvatrFICOHR0XLB2CG+C+rjJmADMdLoUESYWRU2Q6e0qgrhIgipQttaa/Q25XXS5422Ao1wFT96gw8pEMHRVoHyswtS5hxH76P1TZlXa9e/sFcEdGPOfe/McicNAeMgbvLAOzVLQjoo37u1/1FkZnzD74HhfAHm5jyES2JEdAAAAABJRU5ErkJggg==","aspectRatio":2.811088295687885,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/6fbf7/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/a0798/banner.png 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/83f67/banner.png 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/6fbf7/banner.png 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/728bb/banner.png 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/fc672/banner.png 1369w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考","功能","NOVUS","状态管理"],"categories":["code"]}}},{"node":{"excerpt":"一、什么是 DirtyDiff dirty 的意思在 Git 中表示当前本地代码与提交版本相比有修改，还没有提交。很多编辑器就会在行号旁边用颜色标识当前行的修改状态，用以提示用户当前文件状态，平时使用的时候是一个很好用的功能。 二、功能点 diffComputer 用来计算当前文件和 已提交文件的差别（修改、新增和删除） 将计算出来的差别转为 decorations…","id":"0a7e4be6-54c6-552e-b3fc-39ad3df74843","fields":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","slug":"/blog/workpad-part-7","date":"2020-02-05","datetime":"2020-02-05 22:43:52","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","date":"2020-02-05 22:43:52","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"],"categories":["webide"]}}},{"node":{"excerpt":"一、背景 一个 IDE 和编辑器很明显的使用区别就是  go to definition   go to references  的定义和引用跳转，缺少了这个功能，那么和最简单的记事本有什么区别。 如果稍微深入了解 monaco-editor 之后，不满足只是简单的编辑，想要自动提示、自动补全的功能，比如 VSCode…","id":"0513eb5d-f3c9-5c4e-8f3e-5e2ae27f582e","fields":{"title":"🌋 WebIDE 的开发记录其六（LSP 支持）","slug":"/blog/workpad-part-6","date":"2020-02-03","datetime":"2020-02-03 20:01:25","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第六篇文章，谈谈怎么在 monaco-editor 上添加语言服务支持 LSP 的。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","LSP"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其六（LSP 支持）","date":"2020-02-03 20:01:25","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第六篇文章，谈谈怎么在 monaco-editor 上添加语言服务支持 LSP 的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","LSP"],"categories":["webide"]}}},{"node":{"excerpt":"一、为什么要用 textmate 而不是内置的？ 实现 IDE 的过程中好奇为什么 moanco-editor 和 vscode 的高亮不太一样，比较简陋很不舒服，一番搜索发现  monaco-editor  的语言支持使用的是内置的  Monarch  这个语法高亮支持。 官方的解释  Why doesn't the editor support TextMate…","id":"ef6200b8-74e4-5feb-97d7-6347b0e8a360","fields":{"title":"🌋 WebIDE 的开发记录其五（monaco-editor + textmate）","slug":"/blog/workpad-part-5","date":"2020-01-27","datetime":"2020-01-27 20:03:43","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第五篇文章，谈谈怎么在 monaco-editor 用 textmate 替换内置语法和高亮的。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其五（monaco-editor + textmate）","date":"2020-01-27 20:03:43","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第五篇文章，谈谈怎么在 monaco-editor 用 textmate 替换内置语法和高亮的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"categories":["webide"]}}},{"node":{"excerpt":"一、为什么要终端 程序员对电脑的控制大部分还是需要终端的帮助，运行服务、执行代码、调试等等操作都可以在终端中完成，甚至编辑功能也可以在终端中实现，运行环境的管理、文件、程序等能在终端中操作。一般意义上，IDE 和 编辑器的最大区别也是有终端功能的支持。所以日常开发终端是必不可少的一个工具，而在 web 中也已经有很成熟的工具 Xterm.js。 二、基础概念 TTY…","id":"ea937ad6-feef-52c0-9b10-368b0dbd87b9","fields":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","slug":"/blog/workpad-part-4","date":"2020-01-23","datetime":"2020-01-23 21:45:01","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","date":"2020-01-23 21:45:01","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"categories":["webide"]}}},{"node":{"excerpt":"一方面说怎么集成 monaco-editor 到项目中，另一方面怎么用扩展的形式加入新功能。 PS: 本文集成 monaco-editor 不是普遍适用的，包含很多针对当前项目的集成，所以仅供参考。 一、monaco-editor 是什么？ monaco-editor 是一个非常优秀的代码编辑器，大名鼎鼎的 VSCode 的编辑器内核，有非常强大的 IDE…","id":"6317de7e-38c0-57da-8793-840a407a4d8a","fields":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","slug":"/blog/workpad-part-3","date":"2020-01-19","datetime":"2020-01-19 21:00:41","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","date":"2020-01-19 21:00:41","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"categories":["webide"]}}},{"node":{"excerpt":"基础架构就是实现什么核心功能，搭建一个什么样的接口，定义什么样的扩展开发方式。核心的开发模式很多，我选择的也并不是最优解，只是这个项目的实现，最后结果至少还不错，下面从三个方面说一下通用的层面做了哪些工作。 一. 扩展机制 （Extension） 每个 extension 里面都按照标准接口定义，注册数据模型、UI…","id":"9a4bdb5c-4762-505d-b16f-1486fcb53e52","fields":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","slug":"/blog/workpad-part-2","date":"2020-01-12","datetime":"2020-01-12 22:23:32","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","date":"2020-01-12 22:23:32","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHtqmQaB//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEAAQUCX//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAICAwEAAAAAAAAAAAAAAAABESExQVFh/9oACAEBAAE/IV6Ra5BZseUI/9oADAMBAAIAAwAAABDgD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAAMAAwEAAAAAAAAAAAAAAAABESExcaH/2gAIAQEAAT8QXDqu45Rs61wsG0eG5ELbp5DQ/9k=","aspectRatio":2.2311827956989245,"src":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/746ab/ground-design.jpg","srcSet":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/29fd0/ground-design.jpg 180w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/8841e/ground-design.jpg 360w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/746ab/ground-design.jpg 720w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/90537/ground-design.jpg 1080w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/71bec/ground-design.jpg 1245w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"],"categories":["webide"]}}},{"node":{"excerpt":"先看效果演示： 一、为什么要做 在我刚开始入门的时候，当时用  CodeMirror  做了一个前端  Demo  系统，类似  JSFiddle  可以用原生的  html 、 css 、 js  保存展示代码，然后在博客内引入代码和效果，这是代码编辑器的最初版本。后来看到 vscode…","id":"362ef756-e712-5e50-b663-d88e9c40a8c8","fields":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","slug":"/blog/workpad-part-1","date":"2019-12-24","datetime":"2019-12-24 10:58:09","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","date":"2019-12-24 10:58:09","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC3ElEQVQ4y21U23LaMBDltZCQC7QEgm+yZMsXMMbYBoxNpzNtmYEwKVOal/T/P+N0ZRLSdPpwZqW1fLTn7NqNX8ef2G632O32KMoKWZpitSqQUsyyvEYym2E6Tc5Q+3w+p3MrJGmOaTZHnmWYFwUan9cVkmSGmA7qhgGbMTiOA9vmdXRcF7quo9/v4/7+Hr1eD5NogrIswYSEyVwYloBmCgThGI3pNIZuWjAIlmUhcAV8YcMgEkUwHA6haVpNqqD2Ll0UhiHC8QSjKEEUp/CCMYQj0ShXJaLJFH4woqoYpOAYSwfMNDFURATtL6gco4tNUuPKAK4fQQYRxTG446LBhQPX9aAiI7lCkXIGyzTO1b0jpJyyhQuBKIoxHkUIqRhuC3Au0LCYXZOpqG61iUhYBrhlQqOXa9n/QOUMwyTPInBvBOEToQxhC6rQJlYFRZrmKXLCcpGT8XTQpeZQJbbzAlpzypmMJJMlyqogJrsmMZgr6bmjJL8QktHjSUgyfKRJiHjiQXqcCMiGF6i169MlnJpGagR5WFfmBjD5mVAdcGpPPF9gHElqEKM1vexZcDzzHVTOMHTy2MJiuUBGapZVgcVqSSMmT5LrhtDcqbGRUtbmDwaD2qv/QTVGSX56esLhxwGPj484Ho9USPhGqKIQp4G2LFaTW4yd1uwNahJMqs6lixXJZrPBfr/H4XB4JTzJVVEzJK47Gkw7hBemNPA+Pt4x3HR03HZ13HRVNOozvT6jT69EVVVnSM8/ecip3cx20O1xNC9pJOwJgmiFgR6g2R7WaL3iivaXQ1zdGpgvlqjWa5REVtJ/wPMDNBiNgM2sWlqXKmi1B1RhRJ/UHHd9Gx3KXbTv0Gx9QuuiV8cPzY+4vhmgWMyxLguU1JCyWELSSDXCYotguYOTfcMwrNDz1+iIArd8TligbcxwoU1xzXIM4w36o69gyQZW8h3xlyOK7TOqh9+ods/wlw/4A2oMt8mD1+O0AAAAAElFTkSuQmCC","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/a0798/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/83f67/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6fbf7/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/728bb/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c41ff/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"categories":["webide"]}}},{"node":{"excerpt":"想分享的是现代前端复杂的工程化方案，其中需要的各种配置文件，应该没有几个文件没见过吧~\n每次新技术、新需求来临，大呼学不动了的你，看到这些又要披上战甲、拿起键盘冲啊!!! 下面的表格是按照自己几个项目里面用到的一些方案的文件，也算是目前常见的一些了，具体基本上根据文件名就能看出是什么的配置了： name tech desc package.json npm node…","id":"bd5bc321-fdda-5ed6-b08b-71974372143b","fields":{"title":"🔰 前端编辑器常见配置文件","slug":"/blog/config-files","date":"2019-11-27","datetime":"2019-11-27 01:17:36","description":"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”","categories":["code"],"tags":["前端","整理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔰 前端编辑器常见配置文件","date":"2019-11-27 01:17:36","description":"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["前端","整理"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"d0d2f052-390f-57da-80c8-a426a86d8810","fields":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","slug":"/blog/typescript","date":"2019-11-21","datetime":"2019-11-21 11:47:10","description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","categories":["code"],"tags":["整理","TypeScript","TS","前端"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","date":"2019-11-21 11:47:10","description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsSAAALEgHS3X78AAABUElEQVQozz1Su07DQBA8cOwkhHwDPSVCUCI6lAJBg0TPRwB2TCgpkBAgQREESGn4Fj9IgiH5mht29u5SjLy3tzuzs2ezcVMjziqY6xJrAsbtYYVOXoF33dzdmatCkfi7KC31y9p2XlnGUmtNKys12R/V6N/WSkJiNkghfKFrHFLECRGb0uOFLXtXhEGVMYnY5KZy0LOPKdbyLmLBeqr9tisCkrOGFqPMWSWZuSxwNP7F4K3B8cdCcfq5wO7jDINxg7PJEvvPP0rcG9V+6tr69QghlbJqZYGEW3ffOHlvcD75w+HrHHtPc+w8THHwMsPF1xLb91OdjI46bi0yYYWeEBsmqETQurNVIE7dIxh9qFIJKBZJnjEn426FhGcbuZw1YWyvpKQsDAtnIV0wzxydhIcMg9Aqz1LrJkz8csOLRm7R2pR4cGfh1yJCPe3yUUL8DzOweAy6RSgTAAAAAElFTkSuQmCC","aspectRatio":2.6,"src":"/static/dee044e1845238d1a65fdad7a74d6b22/6fbf7/typescript.png","srcSet":"/static/dee044e1845238d1a65fdad7a74d6b22/a0798/typescript.png 180w,\n/static/dee044e1845238d1a65fdad7a74d6b22/83f67/typescript.png 360w,\n/static/dee044e1845238d1a65fdad7a74d6b22/6fbf7/typescript.png 720w,\n/static/dee044e1845238d1a65fdad7a74d6b22/4f982/typescript.png 832w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","TypeScript","TS","前端"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是让你知道 ESLint 的简单背景和用法，以及知道 ESLint 怎么在项目中发挥作用的。 1. ESlint 是个什么 顾名思义  ECMAScript Linter  就是一个 ES 规范的检查器，负责检查代码语法/风格/错误。 在天地初开之时，JS…","id":"35cce3eb-69c1-5c43-b940-6dd9198359ee","fields":{"title":"🚑 Eslint 周边","slug":"/blog/eslint","date":"2019-11-18","datetime":"2019-11-18 23:31:36","description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","categories":["code"],"tags":["ESLint","前端","最佳实践"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚑 Eslint 周边","date":"2019-11-18 23:31:36","description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["ESLint","前端","最佳实践"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是让你知道  flutter  是一个非常不错的跨端解决方案，在开发效率、编程体验、表现力、流畅等方面表现很好，能够承载出色的产品的实现。但是如果你们的生产环境要求比较严格、需求有些极致，还是有很多问题要注意的，不过技术本身的发展趋势还是很值得期待的。 〇、flutter 是什么? flutter  按照官方的定义是一个高性能、一致性的跨端 app SDK…","id":"bbc7ba09-87e9-5f54-9e3a-9fb05f28af66","fields":{"title":"🎨 使用 flutter 构建移动端 App","slug":"/blog/flutter","date":"2019-11-10","datetime":"2019-11-10 16:22:11","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","categories":["code"],"tags":["整理","思考","flutter"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🎨 使用 flutter 构建移动端 App","date":"2019-11-10 16:22:11","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVQY0zWPy0oCUQCGz5TQC+QTtGzTqh6gRRBtoo20jlxGm1p1hQqMaMTAQAoKUgxdREEULSK7ESpKgZKLbKaamryMHmfm3E9G9O0//u8HVcwKDrchdBFyXZcQwjkjBAnOGBdSyip0VpI3Y5F7EHhTgjWwBTtC9U71S1FNkLfw7rNlmZ+arpdKJcMwOKOQSBMJp15pWI3tR9R7AH2xYs/anTeQHZjd8a7mQAgq6jegmNg2opRijAnGiDCGbVa/in+0Eu88W65OJnUwU+zbM84L5onW9O2fDU0v9s/FujY00O6klPyBf5sJFzyRTsUvw9daJvgq/dHM0ulL08HtC1KIlpSb2fKwf6p7IQXIP+1hwciTiUaOaooKlXV9IhofDN+OH1+Q2qGUjPJfPZd+GJ2PeJbznlDlBzoL6nJadrmkAAAAAElFTkSuQmCC","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/6fbf7/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/a0798/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/83f67/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/6fbf7/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/728bb/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/2513a/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/9ecf6/banner.png 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考","flutter"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"f5188044-78fa-51c9-b732-80dc5f1219aa","fields":{"title":"🔐 数据结构和算法 [ONGOING]","slug":"/blog/data-structure-algorithm","date":"2019-10-29","datetime":"2019-10-29 11:45:48","description":"数据结构对于一个程序员是一个基本功，出身计算机科学的肯定会接触过。算法也不用说，常见的算法思想对于业务和能力的提升是显而易见的，至少解决问题的能力建立在熟悉常见数据结构和常见算法的基础上。数据结构和算法是在 IT 行业想有精进的最基础的能力，日常业务、数据处理和算法都必须知道这些，必须好好打扎实这个基础。","categories":["algorithm"],"tags":["算法","整理","思考"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔐 数据结构和算法 [ONGOING]","date":"2019-10-29 11:45:48","description":"数据结构对于一个程序员是一个基本功，出身计算机科学的肯定会接触过。算法也不用说，常见的算法思想对于业务和能力的提升是显而易见的，至少解决问题的能力建立在熟悉常见数据结构和常见算法的基础上。数据结构和算法是在 IT 行业想有精进的最基础的能力，日常业务、数据处理和算法都必须知道这些，必须好好打扎实这个基础。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAWAQEBAQAAAAAAAAAAAAAAAAABAwT/2gAMAwEAAhADEAAAAY0LYphP/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECEBH/2gAIAQEAAQUCJPa//8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQMBAT8Bh//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAABEP/aAAgBAQAGPwIU/8QAGBAAAgMAAAAAAAAAAAAAAAAAAUEAECH/2gAIAQEAAT8higDFX//aAAwDAQACAAMAAAAQBA//xAAWEQADAAAAAAAAAAAAAAAAAAABEDH/2gAIAQMBAT8QFL//xAAWEQEBAQAAAAAAAAAAAAAAAAABEDH/2gAIAQIBAT8QdJ//xAAYEAACAwAAAAAAAAAAAAAAAAABMQAQEf/aAAgBAQABPxCFBUKZX//Z","aspectRatio":4.4884318766066835,"src":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/746ab/banner.jpg","srcSet":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/29fd0/banner.jpg 180w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/8841e/banner.jpg 360w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/746ab/banner.jpg 720w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/90537/banner.jpg 1080w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/c87a3/banner.jpg 1440w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/364f3/banner.jpg 1746w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["算法","整理","思考"],"categories":["algorithm"]}}},{"node":{"excerpt":"想分享的是 Babel 这个工具的流程和最佳实践，平时开发必不可少 Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or…","id":"de5b076e-9374-53fa-9af8-86c2604be3d4","fields":{"title":"💡 Babel 再理解和最佳实践","slug":"/blog/babel-understanding","date":"2019-10-21","datetime":"2019-10-21 13:54:13","description":"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。","categories":["code"],"tags":["babel","ES6","polyfill","最佳实践","前端"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💡 Babel 再理解和最佳实践","date":"2019-10-21 13:54:13","description":"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAc2hEQf/xAAVEAEBAAAAAAAAAAAAAAAAAAACEP/aAAgBAQABBQI3/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAABAx/9oACAEBAAY/AiL/xAAcEAABAwUAAAAAAAAAAAAAAAABABAhETFBgZH/2gAIAQEAAT8huxxRSAGm/9oADAMBAAIAAwAAABCIL//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABYRAAMAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxCBf//EABkQAQEBAQEBAAAAAAAAAAAAAAERACExYf/aAAgBAQABPxDpCItaHNgavqHLVUO/N//Z","aspectRatio":4.026845637583893,"src":"/static/05c5a5df4b2675749b7cad753bb8726b/775d9/banner.jpg","srcSet":"/static/05c5a5df4b2675749b7cad753bb8726b/29fd0/banner.jpg 180w,\n/static/05c5a5df4b2675749b7cad753bb8726b/8841e/banner.jpg 360w,\n/static/05c5a5df4b2675749b7cad753bb8726b/775d9/banner.jpg 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"tags":["babel","ES6","polyfill","最佳实践","前端"],"categories":["code"]}}},{"node":{"excerpt":"想让读者了解的事情 在阅读这篇关于 ES Class 的文章前，希望你能理解： Class 是语法糖  - ES Class 本质上是 prototype 的语法糖，不是全新的概念 执行环境的差异  - 不同环境下 Class 的表现可能有所不同 继承机制的本质  - 理解原型链和构造函数的执行顺序 静态 vs…","id":"7a84bc76-ba53-5e16-a1bc-e584aac14ed6","fields":{"title":"🚑 ES Class 相关","slug":"/blog/es-class","date":"2019-10-20","datetime":"2019-10-20 14:35:15","description":"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。","categories":["code"],"tags":["ESLint","前端","TypeScript","最佳实践"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚑 ES Class 相关","date":"2019-10-20 14:35:15","description":"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["ESLint","前端","TypeScript","最佳实践"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是自己对全栈的想法，从自豪的自称为全栈，到现在懂得术业有专攻，全栈是个职业，不能随便叫自己全栈开发工程师，对职业本身负责，能力广泛、兴趣宽广、懂得很多，也只能是我自己项目的全栈工程师。 Just do whatever it takes to make it work…","id":"e4929f26-4432-5ad2-a704-a0f176aa00a6","fields":{"title":"🚀 全栈=全干","slug":"/blog/full-stack","date":"2019-09-28","datetime":"2019-09-28 09:39:01","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","categories":["code"],"tags":["思考","协作","技巧"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚀 全栈=全干","date":"2019-09-28 09:39:01","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","协作","技巧"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是对 React-Hooks 这个新功能的思考，不仅仅是新的接口，重要的是这种开发模式代表的逻辑的拆分，状态和副作用的思维方式，而不是生命周期~~ Hooks 概念刚出来的时候就看了发布会的 Presentation，当时感觉思想特别好，能够在一个函数里面就可以对数据和生命周期进行管理。 而且对于从 prototype 过来的原型继承，一直觉得虽然 Class…","id":"d96d11a2-0488-56a8-9113-753a97f12f03","fields":{"title":"⚓ React Hooks 理解","slug":"/blog/react-hooks-vs-class","date":"2019-09-18","datetime":"2019-09-18 20:24:36","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","categories":["code"],"tags":["react","hooks","技巧","思考","功能"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⚓ React Hooks 理解","date":"2019-09-18 20:24:36","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAWAQEBAQAAAAAAAAAAAAAAAAAABAX/2gAMAwEAAhADEAAAAbBVnAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAEFAn//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAWEAEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQEAAT8h1a1//9oADAMBAAIAAwAAABB8P//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/EKf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPxCI/8QAFxAAAwEAAAAAAAAAAAAAAAAAAAERMf/aAAgBAQABPxCxLxQs/9k=","aspectRatio":3.4265734265734267,"src":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/746ab/banner.jpg","srcSet":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/29fd0/banner.jpg 180w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/8841e/banner.jpg 360w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/746ab/banner.jpg 720w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/463d3/banner.jpg 980w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["react","hooks","技巧","思考","功能"],"categories":["code"]}}},{"node":{"excerpt":"想分享的是自己在团队内推行的一个项目说明，尤其是多项目切换和多人协作的工作环境。 1. 咋想的 项目的声明周期包括初始化、开发、迭代、部署、交接等，一个维护良好的项目的这些流程不可能随意混乱。在 git 仓库托管大部分项目的背景下，readme 一般作为一个 work board…","id":"2434c3dc-a8ef-5e9a-bf85-7ee3504df40b","fields":{"title":"📒 项目说明怎么写 - Readme 的自我修养","slug":"/blog/project-readme","date":"2019-09-10","datetime":"2019-09-10 20:06:21","description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","categories":["code"],"tags":["技巧","最佳实践","协作"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📒 项目说明怎么写 - Readme 的自我修养","date":"2019-09-10 20:06:21","description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["技巧","最佳实践","协作"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"78770404-d59b-5014-aa22-7b996074ae36","fields":{"title":"🎁 import 还是 require","slug":"/blog/import-or-require","date":"2019-09-03","datetime":"2019-09-03 16:34:10","description":"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。","categories":["code"],"tags":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🎁 import 还是 require","date":"2019-09-03 16:34:10","description":"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIE/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABxUVvIH//xAAWEAADAAAAAAAAAAAAAAAAAAAAARD/2gAIAQEAAQUCHP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEABj8Cf//EABgQAQADAQAAAAAAAAAAAAAAAAEAEBEx/9oACAEBAAE/IYx4ZX//2gAMAwEAAgADAAAAEHwv/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/EDV//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAEFAQAAAAAAAAAAAAAAAVEAEBExYcH/2gAIAQEAAT8Q0kRQACuY8Lf/2Q==","aspectRatio":4.368932038834951,"src":"/static/d432bed0d654bf430d905eac915ebeb9/746ab/banner.jpg","srcSet":"/static/d432bed0d654bf430d905eac915ebeb9/29fd0/banner.jpg 180w,\n/static/d432bed0d654bf430d905eac915ebeb9/8841e/banner.jpg 360w,\n/static/d432bed0d654bf430d905eac915ebeb9/746ab/banner.jpg 720w,\n/static/d432bed0d654bf430d905eac915ebeb9/2b1a3/banner.jpg 900w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"],"categories":["code"]}}},{"node":{"excerpt":"1. TwoPointers…","id":"cde50943-277c-50d3-8fec-e85dd49933c4","fields":{"title":"😜 算法双指针","slug":"/blog/two-pointers","date":"2019-08-25","datetime":"2019-08-25 21:34:51","description":"算法中又一个比较常见的双指针方法，这篇文章来思考下那些场景用的比较多。","categories":["algorithm"],"tags":["算法","技巧"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😜 算法双指针","date":"2019-08-25 21:34:51","description":"算法中又一个比较常见的双指针方法，这篇文章来思考下那些场景用的比较多。","banner":null,"tags":["算法","技巧"],"categories":["algorithm"]}}},{"node":{"excerpt":"很常见的一个 Leet-Code 问题，取出无序数组的最大 K 个数，比如【前-k-个高频元素】【数组中的第k个最大元素】。 下面以【前-k-个高频元素】为例写下思考： 方法一：排序截取 最容易想到的一个方法，选最大的，那就从大到小排序后截取前 K 个呗。 这个算法的复杂度主要是排序部分，快排的话平均可以有 O(nlog 2 n)，加上截取部分的复杂度  O(K…","id":"4d20154a-7beb-5e1e-919e-109f5d3212b8","fields":{"title":"😋 最大的 K 元素","slug":"/blog/bigger-k","date":"2019-08-21","datetime":"2019-08-21 19:54:09","description":"Leet-Code 中常见的一个技巧。","categories":["algorithm"],"tags":["算法","leet-code"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😋 最大的 K 元素","date":"2019-08-21 19:54:09","description":"Leet-Code 中常见的一个技巧。","banner":null,"tags":["算法","leet-code"],"categories":["algorithm"]}}},{"node":{"excerpt":"想分享的是一次哭笑不得的 debug 寻找记~，不是最傻的一次调试精力，但是找到问题最想摔键盘的一次，必须复盘下~~ 记录一次最失败的 debug 过程。 国庆…","id":"d307ef63-3c14-5316-8266-9ca8976cb97f","fields":{"title":"🐛 记录一次最失败的 debug 过程","slug":"/blog/worst-debug","date":"2019-08-13","datetime":"2019-08-13 12:04:51","description":"出现 bug 非常正常，但是 Debug 的过程中切忌浮躁、自以为是、胡乱猜测，其实你以为的并不对，反而让你一次一次的忽视简单的问题线索。","categories":["code"],"tags":["思考","调试"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐛 记录一次最失败的 debug 过程","date":"2019-08-13 12:04:51","description":"出现 bug 非常正常，但是 Debug 的过程中切忌浮躁、自以为是、胡乱猜测，其实你以为的并不对，反而让你一次一次的忽视简单的问题线索。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAID/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIQAxAAAAGMCxYH/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAECAxL/2gAIAQEAAQUCeto7pk6Ul//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABcQAAMBAAAAAAAAAAAAAAAAAAABITL/2gAIAQEABj8C0VkZ/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEhETH/2gAIAQEAAT8h5TDs0KRSP//aAAwDAQACAAMAAAAQDD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAAf/aAAgBAwEBPxBa/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/ECAy/8QAGBABAQEBAQAAAAAAAAAAAAAAAREAITH/2gAIAQEAAT8QcDxY2p29dEpuwd//2Q==","aspectRatio":3.867069486404834,"src":"/static/682eb074669535f65148587fab97baa0/746ab/banner.jpg","srcSet":"/static/682eb074669535f65148587fab97baa0/29fd0/banner.jpg 180w,\n/static/682eb074669535f65148587fab97baa0/8841e/banner.jpg 360w,\n/static/682eb074669535f65148587fab97baa0/746ab/banner.jpg 720w,\n/static/682eb074669535f65148587fab97baa0/90537/banner.jpg 1080w,\n/static/682eb074669535f65148587fab97baa0/c108b/banner.jpg 1280w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","调试"],"categories":["code"]}}},{"node":{"excerpt":"…","id":"2a40922f-a2a5-561a-852a-dfd6aef75549","fields":{"title":"🖐 编程新手问题","slug":"/blog/coding-badcase","date":"2019-08-06","datetime":"2019-08-06 19:14:03","description":"带了一些实习生之后发现编程初学者和老鸟的区别，很多时候经验真的是很重要，在此记录下这些不同","categories":["code"],"tags":["思考","协作","skills"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🖐 编程新手问题","date":"2019-08-06 19:14:03","description":"带了一些实习生之后发现编程初学者和老鸟的区别，很多时候经验真的是很重要，在此记录下这些不同","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApklEQVQY02NYrOGOhhYqOy9SdV2o6rJIzQ3EVXEBokUqzpgqGdD4i9RcD2Q3Hspv3hlTcqiwbWtw9t60mgPZDUfLuxZr4tes6bFQxfnCpEVX56/Zk1J1pKzzbPfsi1MWX5y8+Pqi9Ut1vSFuwWkzEK0wCVxtHb7WMWaNfdRGj6T1rgmrLEJXmAYRdjbI5SouQCesNA9ZaREK1LbKMmyJpvsiVRdMlQBKcHiByyLIdgAAAABJRU5ErkJggg==","aspectRatio":3.861003861003861,"src":"/static/0ce7448fa1bdb466c91825cc26f6adbd/6fbf7/banner.png","srcSet":"/static/0ce7448fa1bdb466c91825cc26f6adbd/a0798/banner.png 180w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/83f67/banner.png 360w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/6fbf7/banner.png 720w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/e9c7b/banner.png 1000w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","协作","skills"],"categories":["code"]}}},{"node":{"excerpt":"1. Reduce js 中一般很少用（至少之前我很少用到）的一个内置函数。 reduce 在数组上带有一个迭代值的遍历。接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，数组本身。 语法: 用法 最简单的应用就是累加： 自带一个可以初始化的迭代值，所以不需要循环、不需要单独创建变量，所以代码非常简洁。类似的需要一个初始值的遍历，用 reduce…","id":"df7df5c2-0af9-5201-8e5d-6635721528ee","fields":{"title":"😄 reduce 函数","slug":"/blog/reduce","date":"2019-07-31","datetime":"2019-07-31 21:09:13","description":"js 中一般很少用（至少之前我很少用到）的一个内置函数，趁着有时间深入了解下。","categories":["algorithm"],"tags":["功能","技巧"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😄 reduce 函数","date":"2019-07-31 21:09:13","description":"js 中一般很少用（至少之前我很少用到）的一个内置函数，趁着有时间深入了解下。","banner":null,"tags":["功能","技巧"],"categories":["algorithm"]}}},{"node":{"excerpt":"这个计划其实在几个月之前就已经准备了，但是拖延症严重啊，现在才正式准备来完成这个任务。 00、缘由 工作从来不是轻松的，尤其是前端，技术上大爆炸式的发展更是让人目不暇接...... 更确切的是学不过来了。让人不由得： 从前的时光很慢。慢的，一生只够学一个 JQuery。现在嫌弃时间太慢，视频教程都要…","id":"32d2b9a3-3ec4-5120-8705-0b75ee1ccbf6","fields":{"title":"🚢 前端进阶之路启程 ","slug":"/blog/one-piece","date":"2019-07-21","datetime":"2019-07-21 11:24:36","description":"虽然不间断的学习，项目中也会用到接触到新技术，但是仍然觉得自己差的很多，特别的焦虑。可能很多人也会有这个阶段，焦虑，有想法，愿意努力，但是不得要领。","categories":["think"],"tags":["思考","闲聊"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚢 前端进阶之路启程 ","date":"2019-07-21 11:24:36","description":"虽然不间断的学习，项目中也会用到接触到新技术，但是仍然觉得自己差的很多，特别的焦虑。可能很多人也会有这个阶段，焦虑，有想法，愿意努力，但是不得要领。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/29fd0/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/8841e/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/746ab/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/90537/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c87a3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14dee/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"tags":["思考","闲聊"],"categories":["think"]}}},{"node":{"excerpt":"…","id":"688959f1-bf10-5e29-bbd2-cfdf13c17f30","fields":{"title":"🌞 不要错过外面美妙的阳光~~","slug":"/blog/to-myself","date":"2019-02-16","datetime":"2019-02-16 10:17:10","description":"写给自己的初心、放下手机，吹吹外面世界真实的风~~","categories":["think"],"tags":["初心","美好"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌞 不要错过外面美妙的阳光~~","date":"2019-02-16 10:17:10","description":"写给自己的初心、放下手机，吹吹外面世界真实的风~~","banner":null,"tags":["初心","美好"],"categories":["think"]}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":true}}}